<template>
  <el-dropdown trigger="click" >
    <div class="cursor-pointer">
        <!-- <svg-icon icon-class="language" :class="isHome ? 'home-language' : 'login-language'"></svg-icon> -->
         <img src="@/assets/imgs/home/language.png" alt="" class="language-img">
    </div>
          <template #dropdown>
          <el-dropdown-menu class="dropdownPop"  >
            <el-dropdown-item 
            v-for="item in languageList" 
            :key="item.value"
            :disabled="item.value === language"
            @click="switchLanguage(item.value)"
            >
            {{item.name}}         
          </el-dropdown-item>
          </el-dropdown-menu>
          </template>
</el-dropdown>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ControlLange',
})
</script>
<script setup  lang="ts">
import i18n from '@/locales/i18n'
import { useSettingStore } from '@/stores/setting'
import { storeToRefs } from 'pinia';
const settingStore = useSettingStore()
const {language} = storeToRefs(settingStore)
const languageList = ref<any>([
    {
        name:'简体中文',
        value:'zh'
    },
    {
        name:'English',
        value:'en'
    }
])
const switchLanguage = (value:string) => {
  localStorage.setItem('language', value)
  i18n.global.locale.value = value as 'zh' | 'en'
  settingStore.changeLanguage(value)
}
</script>

<style  lang="scss" scoped>
.language-img{
  width:30px;
  height: 30px;
}
</style>
